<template>
  <el-dialog
    title="项目编辑"
    v-model="visible"
    top="10vh"
    width="600px"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataFormRules"
      label-position="right"
      label-width="120px"
      v-loading="loading"
    >
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="dataForm.projectName" placeholder="请输入项目名称"></el-input>
      </el-form-item>
      <el-form-item label="项目负责人" prop="userName">
        <el-input v-model="dataForm.userName" placeholder="请输入项目负责人"></el-input>
      </el-form-item>
      <el-form-item label="项目key" prop="projectKey">
        <el-input v-model="dataForm.projectKey" disabled></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="updateOrCreate">确定</el-button>
    </template>

  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch, type PropType } from 'vue'
import { UPDATE_MODEL_EVENT } from 'cm/contants'

import { getProjectMonitoringInfo, updateProjectMonitoring, type ICreateOrUpdateProjectMonitoring } from '@/api/projectMonitoring'
import { fileUpload, type OssApiResult } from '@/api/oss'
import { ElMessage } from 'element-plus'
import appConfig from '@/config/index'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
    default: false
  },
  currId: {
    type: String,
    required: true,
    default: ''
  },
})

const emit = defineEmits([UPDATE_MODEL_EVENT, 'change'])

const visible = ref<boolean>(false)

const handleClose = () => {
  emit(UPDATE_MODEL_EVENT, false)
}

const dataFormRules = {
  projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }]
}

const defaultForm = {
  id: '',
  projectName: '',
  userName: '',
  projectKey: ''
}
// 表单逻辑
const dataForm = ref<ICreateOrUpdateProjectMonitoring>({ ...defaultForm })

const loading = ref<boolean>(false)
// 查询项目详情
const getProjectMonitoringInfoApi = async (currId: string) => {
  loading.value = true
  const res = await getProjectMonitoringInfo(currId)
  loading.value = false
  if (res?.code === 200) {
    dataForm.value = res.data as ICreateOrUpdateProjectMonitoring;
  }
}
watch(
  () => props.modelValue,
  async () => {
    visible.value = props.modelValue
    if (props.modelValue && props.currId) {
      await getProjectMonitoringInfoApi(props.currId)
    }
  }
)

const dataFormRef = ref()
const updateOrCreate = async () => {
  dataFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      loading.value = true
      const res = await updateProjectMonitoring(dataForm.value)
      loading.value = false
      if (res?.code === 200) {
        ElMessage({ type: 'success', message: '更新成功' })
        emit('change')
        handleClose()
      } else {
        ElMessage({ type: 'error', message: res?.msg || '网络异常，请稍后重试！' })
      }
    }
  })
}
</script>

<style scoped>
  .infoImage {
    width: 200px;
    height: 100px;
  }
  .uploader-img :deep(.el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .uploader-img :deep(.el-upload:hover) {
    border-color: var(--el-color-primary);
  }
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 100px;
    text-align: center;
  }
</style>
